<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入图标字体样式表 -->
    <link rel="stylesheet" href="./fa/css/all.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入当前页面的样式表 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- <link rel="stylesheet" href="./js/detail.js"> -->
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            position: absolute;
            border: 1px solid black;
            left: 10px;
        }

        .box1 img {
            width: 200px;
        }

        .box1 .mask {
            width: 100px;
            height: 100px;
            background-color: yellow;
            opacity: .5;
            position: absolute;
            top: 0;
            display: none;
            cursor: move;
        }

        .box2 {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 230px;
            border: 1px solid black;
            /* 隐藏溢出图片 */
            overflow: hidden; 
            display: none;
        }

        .box2 .big {
            width: 800px;
            position: absolute;
            
        }
    </style>
</head>

<body>
    <div class="box1">
        <img src="./img/1.png" alt="">
        <div class="mask"></div>
    </div>
    <div class="box2">
        <img class="big" src="./img/1.png" alt="">
    </div>
    <script>
        window.addEventListener('load', function () {
            var box1 = document.querySelector('.box1')
            var box2 = document.querySelector('.box2')
            var mask = document.querySelector('.mask')
            //鼠标移入
            box1.addEventListener('mouseover', function () {
                box2.style.display = 'block'
                mask.style.display = 'block'
            })
            //鼠标移动
            box1.addEventListener('mousemove', function (e) {
                //(1).先计算出鼠标在盒子内的坐标
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                // (2) 减去盒子高度200的一半是100 就是我们mask的最终left和top值了
                var maskx = x - mask.offsetWidth / 2
                var masky = y - mask.offsetHeight / 2
                mask.style.left = maskx + 'px';
                mask.style.top = masky + 'px';

                //黄色遮挡层不能除box1,故需要加一个判定条件
                if (maskx <= 0) {
                    mask.style.left = 0
                } else if (maskx >= box1.offsetWidth / 2) {
                    mask.style.left = box1.offsetWidth / 2 + 'px'
                    //注意加px
                }
                if (masky <= 0) {
                    mask.style.top = 0
                } else if (masky > box1.offsetHeight / 2) {
                    mask.style.top = box1.offsetHeight / 2 + 'px'
                }

              
                //求出大小图的一个比例，此例中   ratio=4
                var big = document.querySelector('.big')
                big.style.left = mask.style.left.split('px') [0]* (-4) +'px'
                big.style.top = mask.style.top.split('px') [0]* (-4) +'px'
                // console.log(mask.style.left.split('px')[0]*(-2));
            })

            //鼠标离开
            box1.addEventListener('mouseout', function () {
                box2.style.display = 'none'
                mask.style.display = 'none'
            })
        })
    </script>
</body>

</html>